import React from 'react';
import { connect } from 'react-redux';

import { TeacherFilter } from '../../components/smart/filter';
import ChartGroup from '../../components/smart/ChartGroup';
import ExamFlowLineAreaChart from '../../components/dump/charts/ExamFlowLineAreaChart';
import PieChart from '../../components/dump/charts/PieChart';

import Tabs from 'material-ui/lib/tabs/tabs';
import Tab from 'material-ui/lib/tabs/tab';
import FlatButton from 'material-ui/lib/flat-button';

import { ENUM_VIEW } from '../../../schema/constants';

import { changeOption, changeTimeUnit, 
	PVActive, UVActive, 
	EXAM_FLOW_URL, EXAM_SOURCE_URL,
	getExamFlowData } 
	from '../../actions/examination-analysis/examFlowAction';
import { setCondition } from '../../actions/fixup-work/conditionAction';

import omit from 'lodash/object/omit';
import moment from 'moment';
import { DATE_FORMATTER } from '../../../schema/constants';

const map = {
	// 试卷
	103: 'optExaminationPaperData',
	// 知识点
	102: 'optKnowledgeData',
	// 题型
	106: 'optQuestionData',
	// 同步
	104: 'optSynchronizeData',
	// 教辅
	101: 'optSupplementaryData',
	// 专题
	105: 'optSpecialTopicData',
	// 来源分布
	0: 'optSourceDistribution'
}

function mapStateToProps(state) {
	return {
		condition: state.chart.condition,
		examStore: state.examFlow
	};
};

function getData(condition, store) {
	let { currentOptionID, PV, UV, currentTimeUnit } = store;
	let key = map[store.currentOptionID];
	let url = store.currentOptionID == 0 ? EXAM_SOURCE_URL : EXAM_FLOW_URL;
	return getExamFlowData(url, key, {
		condition: omit(condition, 'dataOptions'),
		currentOptionID,
		PV,
		UV,
		currentTimeUnit
	});
};

export class ExamFlow extends React.Component {
	static propTypes = {
		name: React.PropTypes.string,
	};

	constructor(props) {
		super(props);
	}

	request() {
		let { dispatch } = this.props;
		let { currentOptionID, PV, UV, currentTimeUnit } = store;
		let key = map[store.currentOptionID];
		let url = store.currentOptionID == 0 ? EXAM_SOURCE_URL : EXAM_FLOW_URL;
		let action = getExamFlowData(url, key, {
			condition: omit(condition, 'dataOptions'),
			currentOptionID,
			PV,
			UV,
			currentTimeUnit
		});

		dispatch(action);
	}

	// 点击高级筛选条件查询按钮
	handleSearch = () => {
		let { dispatch, condition, examStore } = this.props;

		if (!(condition.subject.includes('0') || condition.subject[0] === '-1')
			&& examStore.currentOptionID == 106)
			dispatch(changeOption(examStore.options[0].ID));

		// get data
		setTimeout(() => {
			let { condition, examStore, dispatch } = this.props;
			dispatch(getData(condition, examStore));
		}, 0);
	};

	// 处理日期范围变化
	handleDateRangeChange = (startDate, endDate) => {
		let { dispatch } = this.props;

		let action = setCondition('startDate', moment(startDate).format(DATE_FORMATTER));
		dispatch(action);

		action = setCondition('endDate', moment(endDate).format(DATE_FORMATTER));
		dispatch(action);

		// get data
		setTimeout(() => {
			let { condition, examStore } = this.props;
			dispatch(getData(condition, examStore));
		}, 0);
	};

	handleActive = (action) => {
		let { dispatch } = this.props;
		dispatch(action());

		setTimeout(() => {
			let { condition, examStore } = this.props;
			dispatch(getData(condition, examStore));
		}, 0);
	};

	handleViewChange = (option) => {
		let { dispatch } = this.props;
		dispatch(changeOption(option));
		dispatch(changeTimeUnit(ENUM_VIEW.DAY));
		dispatch(PVActive());

		setTimeout(() => {
			let { condition, examStore } = this.props;
			dispatch(getData(condition, examStore));
		}, 0);
	};

	handleTimeUnitChange = (option) => {
		let { dispatch } = this.props;
		dispatch(changeTimeUnit(option));
		dispatch(PVActive());

		setTimeout(() => {
			let { condition, examStore } = this.props;
			dispatch(getData(condition, examStore));
		}, 0);
	};

	componentWillMount() {
		let { dispatch, condition, examStore } = this.props;
		dispatch(getData(condition, examStore));
	};

	render() {
		let { examStore, condition } = this.props;
		let { startDate, endDate, subject } = condition;
		let { options, PV, UV, currentTimeUnit, currentOptionID, ...others } = examStore;

		let { optExaminationPaperData,
				optKnowledgeData,
				optQuestionData,
				optSynchronizeData,
				optSupplementaryData,
				optSpecialTopicData,
				optSourceDistribution } = others;

		let children = options.map((item, index) => (
			<Tab key={index} label={item.label} value={item.ID} disabled={
					/*非数学不可点'题型'*/
					item.ID == 106 && !(subject.includes('0') || subject[0] === '-1')
				}></Tab>
		));

		let titlePart = PV ? '人次' : (UV ? '人数' : '未知');

		return (
			<div className='panel'>
	      		<TeacherFilter onSearch={this.handleSearch} />
	      		<ChartGroup
					onDateRangeChange={this.handleDateRangeChange}
					startDate={startDate}
					endDate={endDate}>
					<Tabs
						onChange={this.handleViewChange}
						value={currentOptionID}>
						{children}
					</Tabs>
					{currentOptionID !== 0 && [
					<Tabs key={0}
						onChange={this.handleTimeUnitChange}
						value={currentTimeUnit}>
						<Tab label='日' value={ENUM_VIEW.DAY}></Tab>
						<Tab label='周' value={ENUM_VIEW.WEEK}></Tab>
						<Tab label='月' value={ENUM_VIEW.MONTH}></Tab>
					</Tabs>,
					<div key={1} style={{textAlign: 'center', padding: 10 }}>
						<FlatButton label='人次' secondary={PV} onClick={() => this.handleActive(PVActive)} />
						<FlatButton label='人数' secondary={UV} onClick={() => this.handleActive(UVActive)} />
					</div>
					]}
					<div className='chart'>
						{currentOptionID == 103 && 
						/* 试卷 */
						<ExamFlowLineAreaChart 
                                hasEntry={true}
								title={`用题${titlePart}转化图`}
								subtitle='试卷'
								dataSource={optExaminationPaperData.data} />
						}
						{currentOptionID == 102 && 
						/* 知识点 */
						<ExamFlowLineAreaChart 
                                hasEntry={true}
								title={`用题${titlePart}转化图`}
								subtitle='知识点'
								dataSource={optKnowledgeData.data} />
						}
						{currentOptionID == 106 &&
						/* 题型 */
						<ExamFlowLineAreaChart 
                                hasEntry={true}
								title={`用题${titlePart}转化图`}
								subtitle='题型'
								dataSource={optQuestionData.data} />
						}
						{currentOptionID == 104 && 
						/* 同步 */
						<ExamFlowLineAreaChart 
                                hasEntry={true}
								title={`用题${titlePart}转化图`}
								subtitle='同步'
								dataSource={optSynchronizeData.data} />
						}
						{currentOptionID == 101 && 
						/* 教辅 */
						<ExamFlowLineAreaChart 
                                hasEntry={true}
								title={`用题${titlePart}转化图`}
								subtitle='教辅'
								dataSource={optSupplementaryData.data} />
						}
						{currentOptionID == 105 && 
						/* 专题 */
						<ExamFlowLineAreaChart 
								hasEntry={false}
								title={`用题${titlePart}转化图`}
								subtitle='专题'
								dataSource={optSpecialTopicData.data} />
						}
						{currentOptionID == 0 && 
						<PieChart 
							title={`各来源布置题目次数分布`}
							subtitle=''
							dataSource={optSourceDistribution.data} />
						}
					</div>
				</ChartGroup>
	      	</div>
		);
	}
}

export default connect(
	mapStateToProps,
	// Implement map dispatch to props
)(ExamFlow)
